<template>
	<view class="container">
		<!--header-->
		<view class="tui-header-box">
			<view class="tui-header" :style="{width:width+'px',height:height+'px'}">
				<view class="tui-back" :style="{marginTop:arrowTop+'px'}" @tap="back">
					<tui-icon name="arrowleft" color="#000"></tui-icon>
				</view>
				<view class="tui-searchbox tui-search-mr" :style="{marginTop:inputTop+'px'}" @tap="search">
					<tui-icon name="search" color="#333" :size="22"></tui-icon>
					<text class="tui-search-text" v-if="!searchKey&&!product_type_id">搜索商品</text>
					<text class="tui-search-text" v-if="searchKey">{{searchKey}}</text>
					<view class="tui-search-key" v-if="product_type_id" @click.stop="del_name">
						<view class="tui-key-text">{{product_type_name}}</view>
						<tui-icon name="shut" :size='12' color='#fff'></tui-icon>
					</view>
				</view>
			</view>
		</view>
		<!--header-->
		
		
		<!--screen-->
		<view class="tui-header-screen" :style="{top:height+'px'}">
			<view class="tui-screen-top">
				<view class="tui-top-item tui-icon-ml tui-active tui-bold" @tap="size_money">
					<view>{{selectedName}}</view>
					<tui-icon :name="selectH>0?'arrowup':'arrowdown'" :size="14" color="e41f19" tui-icon-class="tui-ml"></tui-icon>
				</view>
				
				
				
				<view class="tui-top-item" :class="[sales==1?'tui-active tui-bold':'']" @tap="sales_click" :data-index="sales">销量</view>
				<view class="tui-top-item" :class="[new_products==1?'tui-active tui-bold':'']" @tap="new_products_click" :data-index="new_products">新品</view>
				<view class="tui-top-item" @tap="screen">
					<tui-icon :name="isList?'manage':'listview'" :size="isList?22:18" :bold="isList?false:true" color="#333"></tui-icon>
				</view>
		
				<!--下拉选择列表--综合-->
				<view class="tui-dropdownlist" :class="[selectH>0?'tui-dropdownlist-show':'']" :style="{height:px(selectH)}">
					<view class="tui-dropdownlist-item tui-icon-middle" v-for="(item,index) in dropdownList"
					 :key="index" @tap.stop="dropdownItem" :data-index="index" :class="[index==dropdownIndex?'tui-bold':'']">
						<text class="tui-ml tui-middle">{{item}}</text>
						<tui-icon name="check" :size="16" color="#e41f19" :bold="true" v-if="index==dropdownIndex" tui-icon-class="tui-middle"></tui-icon>
					</view>
				</view>
				
				
				<view class="tui-dropdownlist-mask" :class="[selectH>0?'tui-mask-show':'']" @tap.stop="hide_dropdown_list"></view>
				<!--下拉选择列表--综合-->
			</view>
		</view>
		<!--screen-->
		<mescroll-uni :down="downOption" @down="downCallback" @up="upCallback">	
			<!--list-->
			<view class="tui-product-list" :style="{marginTop:px(dropScreenH-84)}">
				<view class="tui-product-container">
					<block v-for="(item,index) in product_list" :key="index" v-if="(index+1)%2!=0 || isList">
						<!--商品列表-->
						<view class="tui-pro-item" :class="[isList?'tui-flex-list':'']" hover-class="hover" :hover-start-time="150"  @tap="product_detail" :data-id="item.id">
							<image :src="item.image_url" class="tui-pro-img" :class="[isList?'tui-proimg-list':'']"
							 mode="widthFix" />
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{item.name}}</view>
								<view>
									<view class="tui-pro-price">
										<text class="tui-sale-price">￥{{item.money}}</text>
										<text class="tui-factory-price">￥{{item.bazaar_money}}</text>
									</view>
									<view class="tui-pro-pay">{{item.sales}}人付款</view>
								</view>
							</view>
						</view>
						<!--商品列表-->
					</block>
				</view>
				<view class="tui-product-container" v-if="!isList">
					<block v-for="(item,index) in product_list" :key="index" v-if="(index+1)%2==0">
						<!--商品列表-->
						<view class="tui-pro-item" :class="[isList?'tui-flex-list':'']" hover-class="hover" :hover-start-time="150"  @tap="product_detail" :data-id="item.id">
							<image :src="item.image_url" class="tui-pro-img" :class="[isList?'tui-proimg-list':'']"
							 mode="widthFix" />
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{item.name}}</view>
								<view>
									<view class="tui-pro-price">
										<text class="tui-sale-price">￥{{item.money}}</text>
										<text class="tui-factory-price">￥{{item.bazaar_money}}</text>
									</view>
									<view class="tui-pro-pay">{{item.sales}}人付款</view>
								</view>
							</view>
						</view>
						<!--商品列表-->
					</block>
				</view>
			</view>
			
			<!--list-->
		</mescroll-uni>		
	</view>
</template>

<script>
	import tuiIcon from "@/components/icon/icon"
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
	import ProductList from './product_list-model.js'   
	var product_list = new ProductList(); 
	export default {
		components: {
			tuiIcon,
			MescrollUni
		},
		data() {
			return {
				downOption: {},
				page:1,
				searchKey: "", //搜索关键词
				product_type_id:'',//商品分类id
				product_type_name:'',//商品分类名称
				width: 200, //header宽度
				height: 64, //header高度
				inputTop: 0, //搜索框距离顶部距离
				arrowTop: 0, //箭头距离顶部距离
				dropScreenH: 0, //下拉筛选框距顶部距离
				sales:0,//销量
				new_products:0,//新品	
				isList: false, //是否以列表展示  | 列表或大图
				selectedName: "综合",
				dropdownIndex:0,//默认选择综合下标
				selectH: 0,
				product_list:[],//商品列表
				dropdownList: [
					 "综合",
					 "价格升序",
					 "价格降序",
				]
			}
		},
		onLoad: function(options) {
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth;
					this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					this.inputTop = obj.top ? (obj.top + (obj.height - 30) / 2) : (res.statusBarHeight + 7);
					this.arrowTop = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					this.searchKey = options.name || "";
					this.product_type_id = options.product_type_id || "";
					this.product_type_name = options.product_type_name || "";
					//略小，避免误差带来的影响
					this.dropScreenH = this.height * 750 / res.windowWidth + 186;
				}
			})
		},
		methods: {
			px(num){
				return uni.upx2px(num) + "px"
			},
			screen(){
				this.isList = !this.isList;
			},
			//显示综合选择
			size_money(){
				var that = this;
				that.selectH = 246;
			},
			//隐藏综合选择
			hide_dropdown_list() {
				var that = this;
				that.selectH = 0;
			},
			//选择综合选择
			dropdownItem(e) {
				var that = this;
				let index = product_list.get_data_set(e,'index');
				if(index != that.dropdownIndex){
					that.dropdownIndex = index;
					that.selectedName = that.dropdownList[index];
					that.page = 1;
					that.product();
				}
				this.selectH = 0;
			},
			//销量
			sales_click(e){
				var that = this;
				let index = product_list.get_data_set(e,'index');
				that.sales = index==1?0:1;
				that.page = 1;
				that.product();
			},
			//新品
			new_products_click(e){
				var that = this;
				let index = product_list.get_data_set(e,'index');
				that.new_products = index==1?0:1;
				that.page = 1;
				that.product();
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				try{
					var that = this;
					that.page = 1;
				} catch (e) {
					mescroll.endErr();
				}
				mescroll.resetUpScroll();
			},
			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			upCallback(mescroll) {
					var that = this;
					that.product((res)=>{
						mescroll.endBySize(res.data.length, res.total);
					})
			},
			//商品列表
			product(callback){
				var that = this;
				product_list.product_list(that.page,that.searchKey,that.sales,that.new_products,that.dropdownIndex,that.product_type_id,(res)=>{
					if(res.code == 8888){
						if(res.data.current_page == 1){
							that.product_list = res.data.data;
							that.total = res.data.total;
						}else{
							for(var i=0;i<res.data.data.length;i++){
								that.product_list.push(res.data.data[i]);
							}
						}
					}
					if(callback){
						if(that.page < res.data.last_page){
							that.page = that.page + 1;
						}
						callback(res.data);
					}
				});
			},
			back(){
				product_list.switch_tab('../index/index');
			},
			search(){
				product_list.navigate_to('../search/search');
			},
			del_name(){
				product_list.navigate_to('../product_list/product_list');
			},
			//跳转商品详情
			product_detail(e){ 
				var id = product_list.get_data_set(e,'id');
				product_list.navigate_to('../product_detail/product_detail?id='+id);
			}
		},
		onBackPress(options) {  
            if (options.from === 'navigateBack') {  
                return false;  
            }  
            this.back();  
            return true;  
        }
	}
</script>

<style>
	@import url("product_list.css");
</style>